import React,{Component} from'react';
import NavLink from'./NavLink';
import {Link,withRouter,hashHistory} from 'react-router';
import {connect} from 'react-redux';
import {getCarts,saveUserId} from './../action/product';
import {saveName} from './../action/auth';


class AppContext extends Component{
    componentWillMount(){
        let userInfo =JSON.parse(sessionStorage.getItem("loginUser"));
        if(userInfo){
            this.props.auth.fakeAuth.authenticate();
            this.props.saveUserId(userInfo.id);
            this.props.saveName(userInfo.username);
            this.props.getCarts(userInfo.id);
        }
         
    }
    signOut(){
        this.props.saveName('');
        this.props.saveUserId('');
        this.props.auth.fakeAuth.signout();
        sessionStorage.removeItem("loginUser");
        hashHistory.push('/');
    }
    render(){   
        const {auth} = this.props;
        const AuthButton = withRouter(({ history }) => (
            auth.fakeAuth.isAuthenticated ? (
                <ul className="nav navbar-nav navbar-right">
                    <li style={{width:'165px',lineHeight:'50px',color:'white'}}>
                        尊敬的  <strong style={{color:'blue',fontSize:'20px'}}>{auth.username}</strong>  ，你好
                    </li>
                    <li>
                        <a href="javascript:void(0)" onClick={() => {this.signOut()}}>注    销</a>
                    </li>
                </ul>
            ) : (
                <ul className="nav navbar-nav navbar-right">
                    <li>
                        <Link to="/login">登    录</Link>
                    </li>
                    <li>
                        <Link to="/register">注    册</Link>
                    </li>
                </ul>
            )
        ))
        return (
            <div className="navbar-wrapper">
                <div className="container" style={{margin:'25px auto'}}>
                    <nav className="navbar navbar-inverse navbar-fixed-top" style={{zIndex:'1'}}>
                    <div className="container">
                        <div className="navbar-header">
                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span className="sr-only">Toggle navigation</span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                        </button>
                        <div className="navbar-brand" href="/home"><Link to="/home">CoCo Shop</Link></div>
                        </div>
                        <div id="navbar" className="navbar-collapse collapse">
                        <ul className="nav navbar-nav"> 
                            <li><NavLink to="/" onlyActiveOnIndex>首页</NavLink></li>
                            <li><NavLink to="/about" >关于</NavLink></li>
                            <li><NavLink to="/product" >商品</NavLink></li>
                            <li><NavLink to="/carts" >购物车</NavLink></li>
                            <li><NavLink to="/news" >新闻</NavLink></li>
                        </ul>
                        <AuthButton/>
                        
                        </div>
                    </div>
                    </nav>

                </div>

                <div className="container marketing" style={{zIndex:'0'}}>
                    {this.props.children}
                </div>
                
                <footer className="footer">
                    <p className="pull-right"><a href="javascript:void(0);">Back to top</a></p>
                    <p>&copy; 2018 Company, Inc. &middot; Privacy&middot;Designed by 周凯迪</p>
                </footer>

            </div>

            
        )
    }
}
const getValue = (state)=>{
    console.log(state)
    return {
        auth:state.auth
    }
}

const App = connect(getValue,{getCarts,saveUserId,saveName})(AppContext);

export default App;
